import Editor from "@/components/Editor";
import { ModalForm, ProFormRadio, ProFormSelect, ProFormText } from "@ant-design/pro-components";
import React from "react";
import VarEditTable from "./VarEditTable";
export type TemplateFormData = Record<string, unknown> & Partial<API.System.MessageTemplateBo>;
export type TemplateFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: TemplateFormData) => Promise<any>;
	categaryOptions: Array<API.System.CategaryVo> | [];
	id: number | undefined;
	open: boolean;
};

const TemplateForm: React.FC<TemplateFormProps> = props => {
	const { id, onCancel, onSubmit, open, categaryOptions } = props;

	// 关闭
	const handleCancel = () => {
		onCancel();
	};
	// 表单提交
	const handleFinish = async (values: TemplateFormData) => {
		// @ts-ignore
		return onSubmit({
			...values,
			id: id ? id : undefined
		} as TemplateFormData);
	};

	return (
		<>
			<ModalForm<TemplateFormData>
				open={open}
				title="创建消息模板"
				grid={true}
				width={900}
				modalProps={{
					centered: true,
					destroyOnClose: true,
					onCancel: () => {
						handleCancel();
					}
				}}
				onFinish={async values => {
					handleFinish(values);
				}}
			>
				<ProFormText
					colProps={{ xs: 24, md: 12, lg: 12 }}
					name="name"
					label="模板名称"
					placeholder="请输入模板名称"
					rules={[
						{
							required: true,
							message: "请输入模板名称"
						}
					]}
				/>
				<ProFormSelect
					colProps={{ xs: 24, md: 12, lg: 12 }}
					name="categaryId"
					label="模板分类"
					fieldProps={{
						showSearch: true,
						fieldNames: { label: "name", value: "id" }
					}}
					placeholder="请选择模板分类"
					rules={[
						{
							required: true,
							message: "请选择模板分类"
						}
					]}
					options={categaryOptions}
				/>
				<ProFormText
					colProps={{ xs: 24, md: 12, lg: 12 }}
					name="name"
					label="模板标题"
					placeholder="请输入模板标题"
					rules={[
						{
							required: true,
							message: "请输入模板标题"
						}
					]}
				/>
				<ProFormSelect
					colProps={{ xs: 24, md: 12, lg: 12 }}
					name="mode"
					label="模板通知类型"
					fieldProps={{
						showSearch: true,
						fieldNames: { label: "name", value: "id" }
					}}
					placeholder="请选择模板通知类型"
					rules={[
						{
							required: true,
							message: "请选择模板通知类型"
						}
					]}
					options={categaryOptions}
				/>
				<ProFormRadio.Group
					colProps={{ md: 12, xl: 12 }}
					options={[
						{ label: "正常", value: "0" },
						{ label: "停用", value: "1" }
					]}
					name="status"
					label="状态"
					radioType="button"
					initialValue={"0"}
					placeholder="请选择状态"
					rules={[
						{
							required: true,
							message: "请选择状态"
						}
					]}
				/>
				<Editor />
				<VarEditTable />
			</ModalForm>
		</>
	);
};
export default TemplateForm;
